<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            /* 圆角边框 */
            /* border-radius: 50%; */
            background-color: red;
            /* 2.使用动画 */
            /* 动画名字 */
            animation-name: rotate;
            /* 动画持续时长 */
            animation-duration: 2s;
            /* 设置动画速度曲线 */
            animation-timing-function: linear;
            /* 设置动画迭代次数 n infinite */
            animation-iteration-count: infinite;
            /* 设置动画执行方向是否反向执行 alternate 反向执行*/
            animation-direction: alternate;
        }
        img{
            /* 动画属性简写 */
            animation: pound 2s linear initial alternate;
        }
        /* 1.定义动画关键帧 */
        @keyframes move {
            from{
                /* 左外边距 */
                margin-left: 0px;
            }
            to{
                /*  */
                margin-left: 200px;
            }
            /* 0% 25% 50% 75% 100% */
        }
        @keyframes rotate {
            from{
                border-radius: 0%;
                background-color:red;
                /* 形变属性 可以设置平移 设置旋转 设置缩放 */
                transfrom:translateX(0px) rotate(0deg);
            }
            to{
                border-radius: 50%;
                background-color: pink;
                transform: translateX(200px) rotate(360deg);
            }
        }
        @keyframes pound {
            from{
                /* scale 缩小 <1缩小 >1放大 */
                transform: scale(0.8);
            }
            to{
                transform: scale(1.2);
            }
        }
    </style>
</head>
<body>
    <div></div>
    <br>
    <img width="100px" src="https://www.baidu.com/link?url=qwzkJCKmJuoqAb1Be5vGenfqbayk0kXhZ-H7ZEi-dLXv6z5sI_T1VrCz2klAZd30oGxgreNFs0MAk494REQDe2XCzlIYdL_60Y-gUEk072LFo-CiUUkTX0BiVazxbgj-NFCS5NJGbDdIk6gjBOlvQ8-CJ0soyrisXj_ySzFgoR2wFXNsp13a4uWRLjSus1z3RklYuCYm3CZx2S8H4rpI0Ox2dUjpXwaFJbrQu3r1Lft92uGlaUK7iKeyNYtmLK--UU7t4MRv6IaejXQ5K8anDNXv_F3tJi9JoGREllr6btEXT_dMWRxHNZsnM9ywLPDzBPHH7o8V_K8nNM2DqDAsOcu9y6oZ4amRVEanwgo-VA-c8nynJCoFuttnVU5b5g_Rigy2zTP55xgXwEWAUjRd41c0budlfAiyKDWLiQhLwftrVHRHZIVEf1Y5wWqx3F9DuNT-w_0PTqwxy3solEakHcHuRa94xuoIbvplwgCYJxwhhTnGpdULmgK3k3aAAjf49EE1Sk8gYvYlscYSCpbFhtaFhUc0SGmabTnw_oxdzd_V07UnjaxDK9tp5iFtp70pZuCaAX4Eo_ncrJdRmNS0w0SQCllFCcEMQaS0iSgmEnM1R7IIZ748Bb9XJbKE765P02Ivmk598uIwoLvafrWgTq&wd=&eqid=d2243dc40049cd9d00000003667a6743" alt="">
</body>
</html>